<template>
  <view class="sand-code">
    <view class="sand-code-header">
      <view class="my-title">
        <view class="my-title-img">
          <image :src="yonghuwx.avatarUrl" mode=""></image>
          <!-- <web-view src="https://www.baidu.com/"></web-view> -->
        </view>
        <view class="my-title-button"
          ><text>{{ name }}</text></view
        >
      </view>
    </view>
    <view class="sand-code-content">
      <view class="apply-wrapper">
        <view class="wrapper-left" @click="goList">
          <view class="wrapper-text">
            <view>我的记录</view>
            <view class="text-min">(扫码出入)</view>
          </view>
        </view>
        <view class="wrapper-right">
          <view class="wrapper-text">
            <view class="text-times">{{ goOutTimes }}</view>
            <view class="text-min">(累计出入)</view>
          </view>
        </view>
      </view>
    </view>
    <view class="form-content">
      <view class="info-content">
        <view class="info-main">
          <form @submit="formSubmit" @reset="formReset">
            <!-- <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="box-left-icon">
                  <text class="iconfont icon-bitian icon1"></text>
                </view>
                <view class="title item-content-title">外出日期</view>
                <view class="item-content-input">
                  <view class="uni-input">
                    <picker mode="date" :value="date" @change="bindDateChange">
                      <view class="uni-input">{{ date }}</view>
                    </picker>
                  </view>
                </view>
              </view>
            </view> -->

            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="box-left-icon">
                  <text class="iconfont icon-bitian icon1"></text>
                </view>
                <view class="title item-content-title">温度</view>
                <view class="item-content-input">
                  <picker
                    mode="multiSelector"
                    :range="arrData"
                    :value="timesIndex"
                    @change="bindChange"
                  >
                    <view class="uni-input" style="color: #333"
                      >{{ arrData[0][dataIndex] }}.{{
                        arrData[1][dataIndexOne]
                      }}</view
                    >
                  </picker>
                </view>
              </view>
            </view>

            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="box-left-icon">
                  <text class="iconfont icon-bitian icon1"></text>
                </view>
                <view class="title item-content-title">电话</view>
                <view class="item-content-input">
                  <input
                    class="uni-input"
                    name="phone"
                    :value="phone"
                    placeholder="输入电话"
                  />
                </view>
              </view>
            </view>
            <view class="min" v-show="showPhone">请正确输入电话号码</view>
            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="box-left-icon">
                  <text class="iconfont icon-bitian icon1"></text>
                </view>
                <view class="title title2">出入地点</view>
              </view>
              <radio-group name="checkAddresses">
                <view>
                  <label>
                    <radio
                      value="新华区"
                      checked="true"
                      color="#20b1ff"
                      style="transform: scale(0.7)"
                    />新华区
                  </label>
                  <label>
                    <radio
                      value="宝安区"
                      color="#20b1ff"
                      style="transform: scale(0.7)"
                    />宝安区
                  </label>
                  <label>
                    <radio
                      value="前城区"
                      color="#20b1ff"
                      style="transform: scale(0.7)"
                    />前城区
                  </label>
                </view>
                <label>
                  <radio
                    value="湖滨区"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />湖滨区
                </label>
                <label>
                  <radio
                    value="静安区"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />静安区
                </label>
                <label>
                  <radio
                    value="市外"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />市外
                </label>
              </radio-group>
            </view>
            <view class="min2" v-show="showAddress">请选择地点</view>

            <view class="uni-form-item uni-column">
              <view class="item-content">
                <view class="box-left-icon">
                  <text class="iconfont icon-bitian icon1"></text>
                </view>
                <view class="title title2">出入形式</view>
              </view>
              <!-- <view class="uni-textarea1">
                <textarea
                  class="uni-width"
                  placeholder-style="color:#666"
                  placeholder="在此输入"
                  name="address"
                />
              </view> -->
              <radio-group name="checkGoOut">
                <view>
                  <label>
                    <radio
                      value="正常外出"
                      checked="true"
                      color="#20b1ff"
                      style="transform: scale(0.7)"
                    />正常外出
                  </label>
                  <label>
                    <radio
                      value="正常返回"
                      color="#20b1ff"
                      style="transform: scale(0.7)"
                    />正常返回
                  </label>
                  <!-- <label>
                    <radio
                      value="前城区"
                      color="#20b1ff"
                      style="transform: scale(0.7)"
                    />前城区
                  </label> -->
                </view>
                <label>
                  <radio
                    value="申请外出"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />申请外出
                </label>
                <label>
                  <radio
                    value="申请返回"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />申请返回
                </label>
                <!-- <label>
                  <radio
                    value="市外"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />市外
                </label> -->
              </radio-group>
            </view>
            <view class="min2" v-show="showSort">请选择出入形式</view>
            <view class="uni-btn-v">
              <button plain="true" form-type="submit" :disabled="isBtn">
                提交
              </button>

              <!-- <button type="default" form-type="reset">Reset</button> -->
            </view>
          </form>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPeopleInfo } from "@/util/getPeopleInfo";
export default {
  data() {
    return {
      show: true,
      isBtn: false,
      showPhone: false,
      showSort: false,
      showAddress: false,
      dataIndex: 1,
      dataIndexOne: 4,
      timesIndex: [1, 4],
      arrData: [
        ["35", "36", "37", "38", "39", "40", "41", "42"],
        ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      ],
      yonghuwx: {},
      name: "赵",
      openid: "",
      phone: "",
      goOutTimes: "0",
    };
  },
  onShow() {
    getPeopleInfo(this).then((result) => {
      this.phone = result.data.data[0].phone;
      // console.log(result);
      this.getTimes();
    });
  },
  methods: {
    //温度选择框
    bindChange(e) {
      this.dataIndex = e.detail.value[0];
      this.dataIndexOne = e.detail.value[1];
    },
    getTimes() {
      this.$MyRequest({
        url: "/go_out_times",
        method: "POST",
        data: {
          openid: this.openid,
        },
      }).then((res) => {
        // console.log(res);
        this.goOutTimes = res.data.goOutTimes;
        // uni.navigateBack({ delta: 1 });
      });
    },
    formSubmit(e) {
      // console.log(
      //   "form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value)
      // );
      let formdata = e.detail.value;
      let tem =
        this.arrData[0][this.dataIndex] +
        "." +
        this.arrData[1][this.dataIndexOne];
      // console.log(formdata);
      let phoneReg = /^1\d{10}$/;
      if (!phoneReg.test(formdata.phone)) {
        this.showPhone = true;
        return;
      } else {
        this.showPhone = false;
      }
      if (formdata.checkAddresses.length < 1) {
        this.showAddress = true;
        return;
      } else {
        this.showAddress = false;
      }
      if (formdata.checkGoOut.length < 1) {
        this.showSort = true;
        return;
      } else {
        this.showSort = false;
      }
      let toDetailData = {
        name: this.name,
        phone: formdata.phone,
        address: formdata.checkAddresses,
        state: formdata.checkGoOut,
        tem: tem,
      };
      this.isBtn = true;
      if (
        formdata.checkGoOut == "正常外出" ||
        formdata.checkGoOut == "申请外出"
      ) {
        uni.showLoading({
          title: "提交中",
        });

        this.$MyRequest({
          url: "/sand_go_out_go",
          method: "POST",
          data: {
            openid: this.openid,
            name: this.name,
            phone: formdata.phone,
            address: formdata.checkAddresses,
            state: formdata.checkGoOut,
            tem: tem,
          },
        }).then((res) => {
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateTo({
              url:
                "/pages/home/SandCode/SandCodeDetail?editItem=" +
                encodeURIComponent(JSON.stringify(toDetailData)),
            });
          }, 500);
        });
      } else {
        uni.showLoading({
          title: "提交中",
        });
        this.$MyRequest({
          url: "/sand_go_out_out",
          method: "POST",
          data: {
            openid: this.openid,
            name: this.name,
            phone: formdata.phone,
            address: formdata.checkAddresses,
            state: formdata.checkGoOut,
            tem: tem,
          },
        }).then((res) => {
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateTo({
              url:
                "/pages/home/SandCode/SandCodeDetail?editItem=" +
                encodeURIComponent(JSON.stringify(toDetailData)),
            });
          }, 500);
          // console.log(res);
          // uni.navigateBack({ delta: 1 });
        });
      }
    },

    goList() {
      uni.navigateTo({ url: "/pages/home/SandCode/SandCodeList" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.sand-code {
  height: 100vh;
  background-color: $uni-color-indexBg;
}
.sand-code-header {
  width: 100%;
  height: 250rpx;
  background-color: #3d86cb;
  .my-title {
    width: 100%;
    height: 220rpx;
    display: flex;
    padding: 0 40rpx;
    box-sizing: border-box;
    .my-title-img {
      @include center;
      image {
        @include center;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        background-color: #ffffff;
      }
    }
    .my-title-button {
      @include center;
      padding: 0 15rpx;
      text {
        padding: 0 20rpx;
        color: #ffffff;
      }
    }
  }
}
.sand-code-content {
  position: absolute;
  top: 200rpx;
  width: 100%;
  .apply-wrapper {
    background-color: #fff;
    width: 93%;
    height: 120rpx;
    margin: 0 auto;
    border-radius: 3px;
    display: flex;
    // justify-content: space-around;
    .wrapper-left {
      flex: 50%;
      @include center;
      border-right: 1rpx solid #eee;
    }
    .wrapper-right {
      flex: 50%;
      @include center;
    }
    .wrapper-text {
      font-size: 17px;
      color: black;
      .text-times {
        @include center;
      }
      .text-min {
        font-size: 12px;
        color: #999;
        @include center;
      }
    }
  }
}
.form-content {
  margin-top: 90rpx;
  .info-content {
    margin: 0 15rpx;
    padding-top: 10px;

    .info-main {
      padding: 0 15rpx;
      background-color: $uni-color-mainBg;
      box-sizing: border-box;
      border-radius: 5px;
      .uni-column {
        border-bottom: 1rpx solid #d8d8de;
        padding: 12rpx 0;
        .uni-label-pointer {
          font-size: 28rpx;
          .uni-checkbox-input {
            width: 20px;
            height: 20px;
          }
        }
        .title {
          // font-size: 55rpx;
          font-size: 30rpx;
          padding: 0 0 15rpx 0;
        }
        .item-content {
          display: flex;
          align-items: center;
          .title {
            // font-size: 55rpx;
            font-size: 30rpx;
            padding: 20rpx 0;
          }

          .item-content-input {
            position: absolute;
            left: 340rpx;
            .uni-input {
              // padding-left: 40rpx;
              font-size: 30rpx;
              color: #c0c0c0;
            }
          }
        }

        // .title {
        //   padding: 30rpx 0;
        // }
      }
      .uni-btn-v {
        padding: 50rpx 0 20rpx 0;
        // border-top: 0 20rpx solid;
        button {
          width: 85%;
          border-radius: 5px;
          font-size: 30rpx;
          color: #fff;
          // size: 10;
          height: 82rpx;
          @include center;
          background-color: $uni-color-primary;
          border: none;
        }
      }
    }
    .info-step {
      // margin-top: 20%;
      width: 100%;
      padding: 30rpx 0;
      box-sizing: border-box;
      // marggn-top: 100rpx;
      // background-color: $uni-color-mainBg;
      .uni-steps {
        // height: 200rpx;
        background-color: $uni-color-mainBg;
        active-color: $uni-color-primary;
        // transform: scale(1.1);
        padding: 60rpx 0;

        box-sizing: border-box;
        // @include center;
        // font-size:80rpx;
      }
    }
    .info-step-test {
      background-color: $uni-color-mainBg;
      padding: 0 0 20rpx 0;
      @include center;
      color: $uni-color-warning;
    }
  }
  .uni-width {
    // width: 95%;
    width: 100% !important;
    font-size: 30rpx;
    height: 80px;
    // padding: 10rpx 15rpx;
  }
  .uni-textarea1 {
    margin: 0 auto;
    // box-sizing: border-box;
    border-radius: 2%;
    background-color: $uni-bg-color-hover;
    padding: 10rpx 15rpx;
    font-size: 12rpx;
    height: 80px;
  }
  .min {
    font-size: 19rpx;
    left: 340rpx;
    color: #fa3534;
    position: absolute;

    // font-weight: bold;
  }
  .min2 {
    font-size: 19rpx;

    color: #fa3534;
  }
}
</style>
